import React, { useMemo, useRef } from 'react'
import { useCurrentNode } from '@/hooks/useCurrentNode';
import './style.less'
import { Rnd } from "react-rnd";
import { AggregateNode, JoinNode, UnionNode } from '@/components/DataFlow/CustomNode';
import { Aggregate } from './Aggregate';
import { Join } from './Join';
import { Empty } from 'antd';
import { AggregateResult } from './Aggregate/AggregateResult';
import { JoinResult } from './Join/JoinResult';
import { Union } from './Union';
import useDesignerStore from '@/store/Designer';
import { usePreviousNodes } from '@/hooks/usePreviousNodes';


export const DataTransform = () => {
  const currentNode = useCurrentNode()
  const { drawerLeftWidth, setDrawerLeftWidth
  } = useDesignerStore()
  const initWidth = useRef(0); // 用于记录调整的初始值

  const prevNodes = usePreviousNodes(currentNode?.id)
  const canModify = useMemo(()=>{
    if (currentNode?.type === JoinNode.displayName) {
      return prevNodes?.length >= 2
    } else {
      return prevNodes?.length >= 1
    }
  },[prevNodes])

  const renderLeftContent = () => {
    if (currentNode?.type === AggregateNode.displayName) {
      return <Aggregate />
    } else if (currentNode?.type === JoinNode.displayName) {
      return <Join />
    } else {
      return <Empty />
    }
  }
  const renderRightContent = () => {
    if (currentNode?.type === AggregateNode.displayName) {
      return <AggregateResult />
    } else if (currentNode?.type === JoinNode.displayName) {
      return <JoinResult />
    } else {
      return <Empty />
    }
  }
  const handleResize = (e, dir, elementRef, delta, pos) => {
    // 基于初始值和 delta 计算新的宽度和高度
    const newWidth = initWidth.current + delta.width;
    setDrawerLeftWidth(newWidth)
  }
  const handleResizeStart = () => {
    // 记录调整的初始值
    initWidth.current = drawerLeftWidth
  };

  if (currentNode?.type === UnionNode.displayName)
    return (
      <div style={{ display: 'flex', overflow: 'hidden', flex: 1, height: '100%' }} >
        <Union />
      </div>
    )
  return (
    <div style={{ display: 'flex', overflow: 'hidden', flex: 1, height: '100%' }} className={!canModify && 'disabled'}>
      {/* 左侧面板 */}
      <Rnd
        default={{
          x: 0,
          y: 0,
          width: drawerLeftWidth, // 初始宽度
          height: '100%', // 高度占满父容器
        }}
        minWidth={600}
        enableResizing={{
          right: true, // 允许从右侧调整宽度
        }}
        disableDragging// 禁止拖动
        bounds="parent" // 限制在父容器内
        resizeHandleWrapperClass="vertical-rnd-wrapper"
        style={{
          background: '#fff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '100%',
          paddingLeft: 20,
          paddingRight: 20,
          position: 'relative',
        }}
        onResizeStart={handleResizeStart}
        onResize={handleResize}
      >
        {renderLeftContent()}
      </Rnd>
      {/* 右侧面板 */}
      <div style={{ flex: 2, paddingLeft: 16, height: '100%', width: window.innerWidth - drawerLeftWidth - 30, borderLeft: '1px solid #ccc' }}>
        {renderRightContent()}
      </div>
    </div>
  );
};